import React from 'react';
import { Carousel } from 'antd';
import 'antd/dist/antd.css';
import head from "./css/detailmore.module.css"
function Swiper(props) {
    const req=props.par;
   const contentStyle = {
       width:"100%",
        height: '160px',
        color: '#fff',
        lineHeight: '160px',
        textAlign: 'center',
        background: 'red',
      };
      function onChange(a, b, c) {
    
      }
    return (
        <div>
            <div>
                {/* afterChange={onChange} */}
                <Carousel afterChange={onChange} className={head.swiperwidth} autoplay={true}>
                    <div className={head.imgparent}>
                        <img src={req.img1} alt="" style={{width:"100%",height:"200px",borderRadius:"5px"}}/>
                    </div>
                    <div className={head.imgparent}>
                    <img src={req.img2} alt="" style={{width:"100%",height:"200px",borderRadius:"5px"}}/>
                    </div>
                    <div className={head.imgparent}>
                    <img src={req.img3} alt="" style={{width:"100%",height:"200px",borderRadius:"5px"}}/>
                    </div>
                    <div className={head.imgparent}>
                    <img src={req.img4} alt="" style={{width:"100%",height:"200px",borderRadius:"5px"}}/>
                    </div>
                    <div className={head.imgparent}>
                    <img src={req.img5} alt="" style={{width:"100%",height:"200px",borderRadius:"5px"}}/>
                    </div>
                    <div className={head.imgparent}>
                    <img src={req.img6} alt="" style={{width:"100%",height:"200px",borderRadius:"5px"}}/>
                    </div>
                </Carousel>,
            </div>
        </div>
    );
}

export default Swiper;